<script lang="ts" setup>
import to from 'await-to-js'
import type { FormInstance } from 'element-plus'
import type { UserInfo, HandleType } from './data'
import OneUpload from '@/component/public/upload/OneUpload.vue'
import Offs from './offs.vue'
import Details from './details.vue'

defineOptions({
  name: 'UserDetail'
})
const emit = defineEmits(['close'])
const props = defineProps<{
  currentRow: UserInfo | undefined
  type: HandleType
}>()
const title = '新增能力下架申请'
const tableData = ref([])
const isLoading = ref(false)
const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(true)
const isOffDialog = ref(false)
const isDialogs = ref(false)
const currentRow = ref<any>()

const data = reactive({
  ruleForm: {
    approve: true
  },
  rules: {
    userId: [{ required: true, message: '请填写' }],
    roleIds: [{ required: true, message: '请选择' }]
  }
})
const { ruleForm, rules } = toRefs<any>(data)

const offclose = (val) => {
  isOffDialog.value = false
  // if(val.value.length) {
  if (val) {
    tableData.value = [...tableData.value, ...val]
    isOffDialog.value = false
  }
  // }
}
const handleSubmit = async () => {
  const validate = await to(ruleFormRef.value.validate())
  if (!validate[1]) return
  const data = JSON.parse(JSON.stringify(ruleForm.value))
  isLoading.value = true
  // const [err] = await to(props.type === 'add' ? addUser(data) : editUser(data))
  isLoading.value = false
  // if (err) return
  ElMessage.success('操作成功')
  emit('close', true)
}
const handleShow = (row?: UserInfo) => {
  currentRow.value = row
  isDialogs.value = true
}
const handleOff = () => {
  isOffDialog.value = true
}
onMounted(() => {
  if (props.currentRow) {
    const data = JSON.parse(JSON.stringify(props.currentRow))
    // ruleForm.value = data
  }
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title" top="2vh" width="1000px" class="one-dialog" draggable @close="emit('close')">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      :disabled="type === 'detail'"
      class="mr-10 one-edit-form">
      <!-- <el-divider content-position="left">能力列表</el-divider> -->
      <div class="">
        <el-table ref="tableRef" :data="tableData" border row-key="id">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column label="能力编码" prop="code" show-overflow-tooltip />
          <el-table-column label="能力名称" prop="name" show-overflow-tooltip />
          <el-table-column label="提供单位" prop="provider" show-overflow-tooltip />
          <!-- <el-table-column label="交付方式" prop="method" show-overflow-tooltip /> -->
          <el-table-column prop="method" label="交付方式" width="110" show-overflow-tooltip>
            <template #default="{ row }">
              <el-tag>{{ row.method }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="能力版本号" prop="tag" show-overflow-tooltip />
          <el-table-column prop="operator" label="操作" width="160px" align="center" fixed="right">
            <template #default="{ row }">
              <el-button link @click="handleShow(row)" type="primary" icon="View" size="small">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button style="margin: 10px" type="primary" @click="handleOff">添加能力</el-button>
      <el-row :gutter="10" class="mt">
        <el-col :lg="24" :span="24">
          <el-form-item label="下架原因:" prop="email">
            <el-input v-model="ruleForm.email" type="textarea" placeholder="下架原因" class="w-full" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit()" :loading="isLoading">确定</el-button>
      </span>
    </template>
    <Details v-if="isDialogs" :currentRow="currentRow" :type="type" @close="isDialogs = false" />
  </el-dialog>
  <Offs v-if="isOffDialog" @close="offclose" />
</template>
